@import '../../ui/base'

.root
  position relative
  width 150px
  @extends .h-center
  input
    width 100%
    -webkit-appearance none
    background transparent
    color blue
    align-self center
    z-index 1
    &::-webkit-slider-thumb
      -webkit-appearance none
      width 14px
      height 14px
      border-radius 50%
      border none
      background-color #708FBD
      cursor pointer

.bar
  position absolute
  top 50%
  width 100%
  transform translate(0, -3px)
  height 6px
  display flex
  left 0

.leftBar
  background-color #A0B6D7

.rightBar
  background-color #DEE5EA

.tip
  position absolute
  left 0
  top -24px
  background-color #000
  color #fff
  text-align center
  font-size 12px
  height 20px
  line-height 20px
  margin-left -8px
  position: absolute
  width 18px
  &::after
    content ''
    position absolute
    width: 4px
    height: 4px
    border-top: solid 4px #000;
    border-left: solid 4px transparent;
    border-right: solid 4px transparent;
    top 100%
    left 5px
    margin-top -1px
    z-index 1
